<template>
	<view class="product-container">
		<!-- 轮播图部分 -->
		<swiper class="swiper" circular indicator-dots autoplay :interval="3000" :duration="500" indicator-active-color="#FF5722" indicator-color="rgba(255, 255, 255, 0.6)">
			<swiper-item v-for="(item, index) in 3" :key="index">
				<view class="swiper-item">
					<image class="swiper-image" src="/static/images/product-default.jpg" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 价格信息 -->
		<view class="price-container">
			<view class="price-left">
				<view class="current-price">¥136</view>
				<view class="original-price">¥236</view>
				<view class="sold-count">已拼536件</view>
			</view>
			<view class="price-right">
				<image class="share-icon" src="/static/svg/share.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 商品标题 -->
		<view class="product-title">
			VELVET香水第五大道香水绿茶香水女士淡香清新自然淡雅学生非持久绿茶味
		</view>
		
		<!-- 物流信息 -->
		<view class="shipping-info">
			<view class="info-item">
				<text class="info-dot"></text>
				<image class="info-icon" src="/static/svg/shipping.svg" mode="aspectFit"></image>
				<text class="info-text">全场包邮</text>
			</view>
			<view class="info-item">
				<text class="info-dot"></text>
				<image class="info-icon" src="/static/svg/return.svg" mode="aspectFit"></image>
				<text class="info-text">7天无理由退货</text>
			</view>
		</view>
		
		<!-- 拼团信息 -->
		<view class="group-buy-container">
			<view class="group-buy-header">
				<view class="group-icon-wrapper">
					<image class="group-icon" src="/static/svg/group-buy.svg" mode="aspectFit"></image>
				</view>
				<text class="group-count">10人正在拼团</text>
				<text class="group-more" @click="showMoreGroups">查看更多</text>
				<text class="group-arrow">></text>
			</view>
			
			<!-- 拼团用户列表 -->
			<view class="group-user-list">
				<view class="group-scroll-container" ref="scrollContainer">
					<view class="group-scroll-content" :style="{ transform: `translateY(${-scrollTop}px)` }">
						<view class="group-user" v-for="(item, index) in groupUserList" :key="index">
							<image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
							<view class="user-info">
								<view class="user-name">{{item.name}}</view>
								<view class="group-status">
									<text>还差</text>
									<text class="highlight">{{item.needCount}}人</text>
									<text>拼成</text>
								</view>
							</view>
							<view class="countdown">
								<image class="timer-icon" src="/static/svg/timer.svg" mode="aspectFit"></image>
								<text>还剩</text>
								<text class="time-number">{{item.countdown.hours}}</text>
								<text>:</text>
								<text class="time-number">{{item.countdown.minutes}}</text>
								<text>:</text>
								<text class="time-number">{{item.countdown.seconds}}</text>
							</view>
							<view class="join-btn" @click="joinGroup">去参团</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 拼团玩法 -->
		<view class="group-play-container">
			<view class="section-header">
				<view class="section-left">
					<view class="section-line"></view>
					<text class="section-title">拼团玩法</text>
				</view>
				<view class="section-right">
					<text class="section-more">详细规则</text>
					<text class="section-arrow">></text>
				</view>
			</view>
			
			<view class="play-steps">
				<view class="play-step">
					<view class="step-icon">开团/参团</view>
					<view class="step-arrow">></view>
				</view>
				<view class="play-step">
					<view class="step-icon">邀请好友</view>
					<view class="step-arrow">></view>
				</view>
				<view class="play-step">
					<view class="step-icon">满员发货不满退款</view>
				</view>
			</view>
		</view>
		
		<!-- 宝贝评价 -->
		<view class="product-review-container">
			<view class="section-header">
				<view class="section-left">
					<view class="section-line"></view>
					<text class="section-title">宝贝评价</text>
					<text class="review-count">(1590)</text>
				</view>
				<view class="section-right">
					<text class="section-more">查看全部</text>
					<text class="section-arrow">></text>
				</view>
			</view>
			
			<view class="review-tags">
				<view class="review-tag">是正品 (79)</view>
				<view class="review-tag">价格实惠 (79)</view>
				<view class="review-tag">洗的干净 (79)</view>
			</view>
			
			<view class="review-item">
				<view class="reviewer-info">
					<image class="reviewer-avatar" src="/static/images/avatar-default.jpg" mode="aspectFill"></image>
					<text class="reviewer-name">小**猫</text>
				</view>
				<view class="review-content">
					这款香水是特别心仪的一个香水，味道淡淡的，比较适合啊，轻熟龄的女生吧，嗯，一开始是，石榴的味道，慢慢的就有一点香
				</view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="product-detail-container">
			<view class="section-header">
				<view class="section-left">
					<view class="section-line"></view>
					<text class="section-title">商品详情</text>
				</view>
			</view>
			
			<view class="detail-content">
				<view class="detail-text">一款中性淡香水。</view>
				<view class="detail-text">清新，绿色，随性雅致。</view>
				<view class="detail-text">自然精髓，其芬芳代表着法兰西生活艺术。</view>
				<view class="detail-text">柑橘和青草的完美和谐，又融入两种基调。</view>
			</view>
		</view>
		
		<!-- 底部留白 -->
		<view class="bottom-space"></view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-action">
			<view class="action-left">
				<view class="action-item">
					<image class="action-icon" src="/static/svg/customer-service.svg" mode="aspectFit"></image>
					<text class="action-text">客服</text>
				</view>
				<view class="action-item">
					<image class="action-icon" src="/static/svg/favorite.svg" mode="aspectFit"></image>
					<text class="action-text">收藏</text>
				</view>
			</view>
			<view class="action-right">
				<view class="btn buy-alone" @click="openSku('single')">
					<view class="btn-price">¥236</view>
					<view class="btn-text">单独购买</view>
				</view>
				<view class="btn start-group" @click="openSku('group')">
					<view class="btn-price">¥136</view>
					<view class="btn-text">发起拼团</view>
				</view>
			</view>
		</view>
		
		<!-- SKU选择器组件 -->
		<sku-selector 
			ref="skuSelector"
			:product-image="productImage"
			:price="currentPrice"
			@confirm="handleSkuConfirm"
		/>
		
		<!-- 更多拼团弹窗 -->
		<uni-popup ref="moreGroupsPopup" type="center">
			<view class="more-groups-popup">
				<view class="popup-header">
					<text class="popup-title">正在拼单</text>
					<text class="popup-close" @click="closeMoreGroups">×</text>
				</view>
				<scroll-view scroll-y class="groups-list">
					<view class="group-user popup-group-user" v-for="(item, index) in groupUserList" :key="index">
						<image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="user-info">
							<view class="user-name">{{item.name}}</view>
							<view class="group-status">
								<text>还差</text>
								<text class="highlight">{{item.needCount}}人</text>
								<text>拼成</text>
							</view>
							<view class="countdown-info">
								<text>还剩</text>
								<text class="time-number">{{item.countdown.hours}}</text>
								<text>:</text>
								<text class="time-number">{{item.countdown.minutes}}</text>
								<text>:</text>
								<text class="time-number">{{item.countdown.seconds}}</text>
							</view>
						</view>
						<view class="join-btn" @click="joinGroup">去参团</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<text class="popup-hint">仅显示6个正在拼单的人</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import SkuSelector from '../../components/SkuSelector.vue';
// 导入uni-popup组件
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue';

// 商品数据
const productImage = ref('/static/images/product-default.jpg');
const singlePrice = ref(236);
const groupPrice = ref(136);
const buyType = ref('group'); // 'single'单独购买, 'group'拼团

// 拼团用户数据
const groupUserList = ref([
  {
    id: 1,
    name: '袁青衣',
    avatar: '/static/images/avatar-default.jpg',
    needCount: 1,
    countdown: { hours: '00', minutes: '49', seconds: '40' }
  },
  {
    id: 2,
    name: '袁青衣',
    avatar: '/static/images/avatar-default.jpg',
    needCount: 1,
    countdown: { hours: '00', minutes: '49', seconds: '40' }
  },
  {
    id: 3,
    name: '李小花',
    avatar: '/static/images/avatar-default.jpg',
    needCount: 1,
    countdown: { hours: '00', minutes: '52', seconds: '15' }
  },
  {
    id: 4,
    name: '王大明',
    avatar: '/static/images/avatar-default.jpg',
    needCount: 2,
    countdown: { hours: '01', minutes: '20', seconds: '30' }
  },
  {
    id: 5,
    name: '张三',
    avatar: '/static/images/avatar-default.jpg',
    needCount: 1,
    countdown: { hours: '00', minutes: '45', seconds: '10' }
  }
]);

// 滚动相关
const scrollContainer = ref(null);
const scrollTop = ref(0);
const scrollHeight = ref(0);
const visibleHeight = ref(0);
let scrollTimer = null;
const scrollSpeed = 1; // 滚动速度
const scrollPause = 3000; // 停顿时间(毫秒)
let isPaused = false;
let pauseTimeout = null;

// 滚动函数
const startScroll = () => {
  if (scrollTimer) clearInterval(scrollTimer);
  
  scrollTimer = setInterval(() => {
    if (isPaused) return;
    
    // 增加滚动位置
    scrollTop.value += scrollSpeed;
    
    // 如果一个用户完全滚出了可视区域
    const itemHeight = 120; // 每个拼团项的大致高度
    if (scrollTop.value >= itemHeight) {
      // 暂停滚动
      isPaused = true;
      
      // 一段时间后恢复并重置位置
      pauseTimeout = setTimeout(() => {
        // 将第一个元素移到最后
        const firstItem = groupUserList.value.shift();
        groupUserList.value.push(firstItem);
        
        // 重置滚动位置
        scrollTop.value = 0;
        
        // 恢复滚动
        isPaused = false;
      }, scrollPause);
    }
  }, 30);  // 滚动更新频率
};

// 在组件挂载时启动滚动
onMounted(() => {
  startScroll();
});

// 在组件销毁前清除定时器
onBeforeUnmount(() => {
  if (scrollTimer) clearInterval(scrollTimer);
  if (pauseTimeout) clearTimeout(pauseTimeout);
});

// 计算当前价格
const currentPrice = computed(() => {
  return buyType.value === 'single' ? singlePrice.value : groupPrice.value;
});

// sku选择器引用
const skuSelector = ref(null);
// 拼团弹窗引用
const moreGroupsPopup = ref(null);

// 显示更多拼团弹窗
const showMoreGroups = () => {
  moreGroupsPopup.value.open();
};

// 关闭更多拼团弹窗
const closeMoreGroups = () => {
  moreGroupsPopup.value.close();
};

// 打开SKU选择器
const openSku = (type) => {
  buyType.value = type;
  skuSelector.value.open(type);
};

// 处理SKU确认事件
const handleSkuConfirm = (selection) => {
  console.log('选择的SKU：', selection);
  
  // 获取价格信息
  const price = selection.buyType === 'single' ? singlePrice.value : groupPrice.value;
  
  // 构建商品信息参数
  const params = {
    productImage: encodeURIComponent(productImage.value),
    title: encodeURIComponent('VELVET香水第五大道香水绿茶香水女士淡香'),
    skuText: encodeURIComponent(`规格：${selection.sku || '50ml'}`),
    price: price,
    num: selection.quantity || 1,
    buyType: selection.buyType
  };
  
  // 构建跳转URL和参数
  const url = `/pages/index/buy?${Object.keys(params).map(key => `${key}=${params[key]}`).join('&')}`;
  
  // 跳转到订单结算页面
  uni.navigateTo({
    url: url
  });
};

// 参与已有拼团
const joinGroup = () => {
  // 直接打开SKU选择器，并设置为参团模式
  buyType.value = 'join';
  skuSelector.value.open('join');
};
</script>

<style>
.product-container {
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 轮播图样式 */
.swiper {
	width: 100%;
	height: 750rpx;
}
.swiper-item {
	width: 100%;
	height: 100%;
}
.swiper-image {
	width: 100%;
	height: 100%;
}

/* 价格信息样式 */
.price-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
}
.price-left {
	display: flex;
	align-items: baseline;
}
.current-price {
	font-size: 48rpx;
	color: #FF5722;
	font-weight: bold;
}
.original-price {
	font-size: 28rpx;
	color: #999;
	text-decoration: line-through;
	margin-left: 20rpx;
}
.sold-count {
	font-size: 24rpx;
	color: #999;
	margin-left: 20rpx;
}
.share-icon {
	width: 40rpx;
	height: 40rpx;
}

/* 商品标题样式 */
.product-title {
	padding: 20rpx 30rpx;
	font-size: 32rpx;
	line-height: 1.5;
	background-color: #fff;
	color: #333;
}

/* 物流信息样式 */
.shipping-info {
	display: flex;
	padding: 20rpx 30rpx;
	background-color: #fff;
	margin-top: 20rpx;
}
.info-item {
	display: flex;
	align-items: center;
	margin-right: 40rpx;
}
.info-dot {
	width: 10rpx;
	height: 10rpx;
	background-color: #FF5722;
	border-radius: 50%;
	margin-right: 10rpx;
}
.info-icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.info-text {
	font-size: 24rpx;
	color: #666;
}

/* 拼团信息样式 */
.group-buy-container {
	margin-top: 20rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
}
.group-buy-header {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #f0f0f0;
}
.group-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}
.group-icon {
	width: 30rpx;
	height: 30rpx;
}
.group-count {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}
.group-more {
	font-size: 24rpx;
	color: #999;
}
.group-arrow {
	margin-left: 10rpx;
	font-size: 24rpx;
	color: #999;
}

.group-user-list {
	display: flex;
	flex-direction: column;
	height: 240rpx; /* 固定高度，只显示两个拼团项 */
	overflow: hidden;
}

.group-scroll-container {
	overflow: hidden;
	height: 100%;
	position: relative;
}

.group-scroll-content {
	transition: transform 0.5s ease;
}

.group-user {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f0f0f0;
	height: 120rpx; /* 固定每个拼团项的高度 */
	box-sizing: border-box;
}
.group-user:last-child {
	border-bottom: none;
}
.user-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.user-info {
	flex: 1;
}
.user-name {
	font-size: 28rpx;
	color: #333;
}
.group-status {
	font-size: 24rpx;
	color: #666;
	margin-top: 10rpx;
}
.highlight {
	color: #FF5722;
}
.countdown {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
.timer-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 6rpx;
}
.countdown text {
	font-size: 22rpx;
	color: #666;
}
.time-number {
	background-color: #f0f0f0;
	padding: 0 6rpx;
	border-radius: 4rpx;
	color: #FF5722 !important;
}
.join-btn {
	padding: 10rpx 20rpx;
	background-color: #FF5722;
	color: #fff;
	font-size: 24rpx;
	border-radius: 30rpx;
}

/* 拼团玩法样式 */
.group-play-container {
	margin-top: 20rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}
.section-left {
	display: flex;
	align-items: center;
}
.section-line {
	width: 8rpx;
	height: 32rpx;
	background-color: #FF5722;
	margin-right: 20rpx;
}
.section-title {
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
}
.review-count {
	font-size: 28rpx;
	color: #999;
	margin-left: 10rpx;
}
.section-right {
	display: flex;
	align-items: center;
}
.section-more {
	font-size: 24rpx;
	color: #999;
}
.section-arrow {
	margin-left: 6rpx;
	font-size: 24rpx;
	color: #999;
}

.play-steps {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20rpx 0;
}
.play-step {
	display: flex;
	align-items: center;
}
.step-icon {
	font-size: 26rpx;
	color: #666;
}
.step-arrow {
	margin: 0 20rpx;
	color: #999;
}

/* 宝贝评价样式 */
.product-review-container {
	margin-top: 20rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
}

.review-tags {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
}
.review-tag {
	padding: 8rpx 20rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #666;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
}

.review-item {
	padding: 20rpx 0;
}
.reviewer-info {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}
.reviewer-avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}
.reviewer-name {
	font-size: 24rpx;
	color: #999;
}
.review-content {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
}

/* 商品详情样式 */
.product-detail-container {
	margin-top: 20rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
}

.detail-content {
	padding: 20rpx 0;
}
.detail-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.8;
	margin-bottom: 10rpx;
}

/* 底部留白 */
.bottom-space {
	height: 20rpx;
}

/* 底部操作栏样式 */
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	display: flex;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}
.action-left {
	display: flex;
	width: 30%;
	border-right: 1px solid #f0f0f0;
}
.action-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.action-icon {
	width: 40rpx;
	height: 40rpx;
}
.action-text {
	font-size: 20rpx;
	color: #999;
	margin-top: 6rpx;
}
.action-right {
	display: flex;
	width: 70%;
}
.btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.btn-price {
	font-size: 28rpx;
	font-weight: bold;
}
.btn-text {
	font-size: 24rpx;
}
.buy-alone {
	background-color: #FFB300;
}
.start-group {
	background-color: #FF5722;
}

/* 更多拼团弹窗样式 */
.more-groups-popup {
	width: 650rpx;
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}
.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1px solid #f0f0f0;
}
.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}
.popup-close {
	font-size: 40rpx;
	color: #999;
}
.groups-list {
	max-height: 750rpx;
	padding: 0 30rpx;
}
.popup-group-user {
	height: auto !important;
	padding: 30rpx 0;
}
.countdown-info {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
	font-size: 22rpx;
	color: #666;
}
.popup-footer {
	padding: 20rpx;
	text-align: center;
	border-top: 1px solid #f0f0f0;
}
.popup-hint {
	font-size: 24rpx;
	color: #999;
}
</style>
